import { useUserInfo } from "@/features/business/HomePage_deprecated"
import { useLoginAction } from "@/features/useSearchAction"
import styled from "@emotion/styled"
import { useEffect, useRef } from "react"
import { useNavigate, useParams } from "react-router-dom"
import "swiper/css"
import { Autoplay, Pagination } from "swiper/modules" // 新增导入
import { Swiper, SwiperRef, SwiperSlide } from "swiper/react"
import { getAssetsUrlWithHttp } from "@/features/business/HomePage_deprecated/constant"
import { MemberIndexBannerItem } from "@/apis/home_page_constant_types"

const Container = styled.div`
    position: relative;
`
const SlideItem = styled.div`
    height: 323rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rem;
`
const Post = styled.img`
    object-fit: fill;
    width: 100%;
    height: 100%;
`

const BottomLinerStyled = styled.div`
    height: 24rem;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 8;
    background: linear-gradient(to top, #f5f5f5 0%, rgba(255, 255, 255, 0) 100%);
`
interface Props {
    list: MemberIndexBannerItem[]
}

const PaginationStyled = styled.div`
    padding-bottom: 20rem;
    padding-right: 12rem;
    position: absolute;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: flex-end;
    .swiper-pagination-bullet {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        margin-right: 4rem;
        transition: width 0.2s ease;
    }
    .swiper-pagination-bullet-active {
        width: 24rem;
        background-color: #ff1f57;
    }
`

export function BannersSpin({ list }: Props) {
    const refPagination = useRef<HTMLDivElement | null>(null)
    const { categoryId = "" } = useParams<{ categoryId: string }>()
    const swiperRef = useRef<SwiperRef>(null)
    const navigate = useNavigate()
    useEffect(() => {
        setTimeout(() => {
            // TEST-339【Test】前台-home页-从场馆返回到for you- banner位的滑动条会消失
            window.scrollTo({
                top: 1,
                behavior: "smooth",
            })
        })
    }, [categoryId])

    const { isLogin } = useUserInfo()
    const { openModalToStep } = useLoginAction()

    return (
        <Container>
            <Swiper
                ref={swiperRef}
                loop={list.length >= 1}
                pagination={{
                    el: refPagination.current,
                    clickable: true,
                    // type: 'custom',
                }}
                modules={[Autoplay, Pagination]}
                autoplay={{
                    delay: 3000, // 3秒切换一次
                    disableOnInteraction: true, // 用户操作后继续自动播放
                }}
            >
                {list.map((banner, idx) => {
                    return (
                        <SwiperSlide key={`${idx}_swiper_item`}>
                            <SlideItem
                                onClick={() => {
                                    if (banner.link_h5) {
                                        isLogin
                                            ? navigate(banner.link_h5)
                                            : openModalToStep("login-otp-1")
                                    }
                                }}
                            >
                                <Post
                                    src={getAssetsUrlWithHttp(banner.url)}
                                    alt=""
                                />
                            </SlideItem>
                        </SwiperSlide>
                    )
                })}
            </Swiper>
            <BottomLinerStyled />
            <PaginationStyled
                ref={refPagination}
                className={"pagination_el"}
            />
        </Container>
    )
}
